<template>
  <f7-page>
    <f7-navbar :title="$t('settings.fenceSetting.title')" :back-link="$t('common.back')"></f7-navbar>
    <div id="lbsmap">
        <lbs-map  :maptype="$store.state.map.type" :center="$store.state.map.center" :zoom="$store.state.map.zoom">
          <lbs-geofence  v-for="(geofence,index) in geofences"
          :key="index"
          :type="geofence.type"
          @editCall="editCall"
          :editable="false"
          :id="geofence.id"
          :area="geofence.area"
          :label="geofence.name"
          :visible="true"
          :color="geofence.color"></lbs-geofence>
          <lbs-draw :type="draw.type" :enable="draw.enable" @drawCall="drawCall"></lbs-draw>
        </lbs-map>
        <f7-fab position="right-top" slot="fixed" color="blue">
          <f7-icon ios="f7:add" md="material:add"></f7-icon>
          <f7-icon ios="f7:close" md="material:close"></f7-icon>
          <f7-fab-buttons position="bottom">
            <f7-fab-button :label="$t('settings.fenceSetting.circle')" @click="switchType('circle')"><f7-icon f7="circle" size="18px"></f7-icon></f7-fab-button>
            <f7-fab-button :label="$t('settings.fenceSetting.polygon')" @click="switchType('polygon')"><f7-icon f7="photos" size="18px"></f7-icon></f7-fab-button>
            <f7-fab-button :label="$t('settings.fenceSetting.lineString')"><f7-icon f7="delete" size="18px"></f7-icon></f7-fab-button>
          </f7-fab-buttons>

        </f7-fab>

    </div>
  </f7-page>
</template>

<script>
  import { getGeofences } from '@/api/api';
export default {
  data: function() {
          return {
              geofences:[],
              draw:{ //地图上绘制特征事件
                type:'',//绘制类型
                editable:'',
                build:'',//需要构建的对象
                enable:false//是否启用
              },

          }
        },
  methods:{
      init(){
        getGeofences().then(data=>{

          this.geofences = data;

        });
      },
      editCall(geofence){//编辑完围栏回调的方法

			     console.log(geofence);


			},
      switchType(type){
        console.log(type);
        var draw = {
             type:type,
             editable:true,
             enable:true
           };
          this.draw=draw;

      },
      drawCall(geofence){//绘制完回调的方法
          //   var formatArea = "";
          // if(geofence.type.toLowerCase()==='circle'){
          //     var arr = geofence.area.split(', ');
          //     var point = arr[0].split(' ');
          //     var radius = arr[1]
          //    formatArea = point[1]+' '+point[0]+', '+radius
          // }else if(geofence.type.toLowerCase()==='polygon'){
          //   var points = geofence.area.split(', ');
          //   var coords = []
          //   points.forEach(point => {
          //     coords.push(point.split(' ')[1] + ' '+point.split(' ')[0])
          //   });
          //   formatArea = coords.join(', ');
          // }else if(geofence.type.toLowerCase()==='linestring'){
          //   var points = geofence.area.split(', ');
          //   var coords = []
          //   points.forEach(point => {
          //     coords.push(point.split(' ')[1] + ' '+point.split(' ')[0])
          //   });
          //   formatArea = coords.join(', ');
          // }
          // //console.log(formatArea);
          //   var geo = {
          //     area: formatArea,
          //     editable:true,
          //     label:"新建围栏",
          //     type : geofence.type.toLowerCase(),
          //     visible:true,
          //     color:'red'
          //   }

          console.log(geofence);


    },

  },
  created(){

  },
  mounted () {
      this.init();
    },
}
</script>
<style>

</style>
